<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
<title>途羊旅游网后台管理系统</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="css/uniform.css" />
<link rel="stylesheet" href="css/select2.css" />
<link rel="stylesheet" href="css/unicorn.main.css" />
<link rel="stylesheet" href="css/unicorn.grey.css" class="skin-color" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

	<div id="header">
		<h1>
			<a href="./dashboard.html">Unicorn Admin</a>
		</h1>
	</div>

	<div id="user-nav" class="navbar navbar-inverse">
		<ul class="nav btn-group">
			<li class="btn btn-inverse"><a title="" href="#"><i
					class="icon icon-user"></i> <span class="text">欢迎进入！管理员： ${sessionScope.admin.adminName}</span></a></li>
			
			<li class="btn btn-inverse"><a title="" href="login.jsp"><i
					class="icon icon-share-alt"></i> <span class="text">退出</span></a></li>
		</ul>
	</div>

	<div id="sidebar">
		<a href="#" class="visible-phone"><i class="icon icon-home"></i>
			Dashboard</a>
		<ul>
			<li><a href="index.jsp"><i class="icon icon-th-list"></i>
					<span>首页</span> </a>
			</li>
			<li class="active"><a href="userManage.jsp"><i class="icon icon-th-list"></i> <span>用户管理</span></a></li>
			
			<li class="submenu">
					<a href="#"><i class="icon icon-th-list"></i> <span>景点管理</span> <span class="label">2</span></a>
					<ul>
						<li><a href="insertScenic.jsp">新增景点</a></li>
						<li><a href="findAllScenic.jsp">维护景点信息</a></li>
						
					</ul>
				</li>
				
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>酒店管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="insert-hotel.jsp">
							<span>新增酒店</span></a></li>
					<li><a href="hotel-management.jsp">
							<span>维护酒店信息</span></a></li>
				</ul>
			</li>
			<li class="submenu">
				<a href="#"><i class="icon icon-th-list"></i> <span>客房管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="room-management.jsp">维护客房信息</a></li>
					<li><a href="insert-room.jsp">新增客房</a></li>
				</ul>
			</li>
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>评论管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="hotel-comment.jsp">
							<span>大众点评酒店</span></a></li>
					<li><a href="scenic-comment.jsp">
							<span>大众点评景点</span></a></li>
				</ul>
			</li>
			<li class="submenu"><a href="#"><i class="icon icon-th-list"></i>
					<span>订单管理</span> <span class="label">2</span></a>
				<ul>
					<li><a href="findAllHotelOrder.jsp">
							<span>酒店订单</span></a></li>
					<li><a href="findAllScenicOrder.jsp">
							<span>景点门票订单</span></a></li>
				</ul>
			</li>

		</ul>

	</div>

	<div id="style-switcher">
		<i class="icon-arrow-left icon-white"></i> <span>Style:</span> <a
			href="#grey"
			style="background-color: #555555; border-color: #aaaaaa;"></a> <a
			href="#blue" style="background-color: #2D2F57;"></a> <a href="#red"
			style="background-color: #673232;"></a>
	</div>

	<div id="content">
		<div id="content-header">
			<h1>用户管理</h1>
		</div>
		<div id="breadcrumb">
			<a href="#" class="tip-bottom"><i class="icon-home"></i> Home</a><a href="#" class="current">用户管理</a> 
		</div>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">

					<div class="widget-box">
						<div class="widget-title">

							<h5>Dynamic table</h5>
						</div>
						<div class="widget-content nopadding">

							<select id="select-pageSize" size="1"
								name="DataTables_Table_0_length"
								aria-controls="DataTables_Table_0" style="display: none;">
								<option value="10" selected="selected">10</option>
								<option value="20">20</option>
								<option value="30">30</option>
								<option value="40">40</option>
							</select>

							<div style="float: right;">
								<label><span>用户名称：</span> <input type="text"
									aria-controls="DataTables_Table_0" id="keyword">
									<button id="user-button" style="margin-top: -10px;">搜索</button></label>
							</div>
							<table class="table table-bordered ">

								<tr>
									<th>用户编号</th>
									<th>用户名称</th>
									<th>用户密码</th>
									<th>用户性别</th>
									<th>用户出生日期</th>
									<th>用户地址</th>
									<th>用户联系方式</th>
									<th>用户头像</th>
									<th>用户操作</th>
								</tr>
								<tbody id="tbody-user">
									<!-- <tr>
										<td>1</td>
										<td>1</td>
										<td>1</td>
										<td>1</td>
										<td>1</td>
										<td>1</td>
										<td>1</td>
										<td>1</td>
									</tr> -->
								</tbody>
							</table>
						</div>
					</div>
					<div
						class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers"
						id="DataTables_Table_0_paginate">
						<a tabindex="0"
							class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled"
							id="DataTables_Table_0_first">首页</a> <a tabindex="0"
							class="previous fg-button ui-button ui-state-default ui-state-disabled"
							id="DataTables_Table_0_previous">上一页</a> <span> <a
							tabindex="0"
							class="fg-button ui-button ui-state-default ui-state-disabled">1</a>
							<a tabindex="0" class="fg-button ui-button ui-state-default">2</a>
							<a tabindex="0" class="fg-button ui-button ui-state-default">3</a>
							<a tabindex="0" class="fg-button ui-button ui-state-default">4</a>
							<a tabindex="0" class="fg-button ui-button ui-state-default">5</a>
						</span> <a tabindex="0" class="next fg-button ui-button ui-state-default"
							id="DataTables_Table_0_next">下一页</a> <a tabindex="0"
							class="last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default"
							id="DataTables_Table_0_last">尾页</a>
					</div>
				</div>
			</div>

			<div class="row-fluid">
				<div id="footer" class="span12">
					2020 &copy; Travel Admin.
				</div>
			</div>
		</div>
	</div>

	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.ui.custom.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.uniform.js"></script>
	<script src="js/select2.min.js"></script>
	<script src="js/jquery.dataTables.min.js"></script>
	<script src="js/unicorn.js"></script>
	<script src="js/unicorn.tables.js"></script>
</body>

<script type="text/javascript">
	$(document).ready(function() {
		sendAJAX(1);
		//搜索事件
		$(document).on("click", "#user-button", function() {
			sendAJAX(1);
		});
		//删除事件
		$(document).on("click", "#delete", function() {
			//显示页面
			var pageNum=$("#pageInfo").data("pagenum");
			// 获取显示记录数
			var pageSize = $("#select-pageSize").val();
			// 获取输入关键字
			var keyword = $("#keyword").val();
			var userId=$(this).data("userid");
			$.ajax({
				async : true,
				type : "get",
				url : "${pageContext.request.contextPath}/index",
				data : {
					op : "delete",
					pageNum : pageNum,
					pageSize : pageSize,
					keyword : keyword,
					userId  : userId
				},
				dataType : "json",
				success : function(result) {
					//解决删除的当前页已经无数据的情况
					if(result.pageNum>result.pages){
						if(result.pages==0){
							$("#tbody-user").html("无相关数据");
							$("#DataTables_Table_0_paginate").html("");
							return;
						}
						sendAJAX(result.pages);
					}else{
						showData(result);
					}
					// 调用渲染函数
					
				},
				error : function() {
					alert("异步请求失败!");
				}
			});
			
		});
		
		
		//下拉框改变事件
		$(document).on("change", "#select-pageSize", function() {
			sendAJAX(1);
		});
		//首页
		$(document).on("click", "#DataTables_Table_0_first", function() {

			// 获取当前页码
			var pageNum = $("#pageInfo").data("pagenum");
			console.log(pageNum);
			// 判断
			if (pageNum == 1) {
				alert("已经是首页");
			} else {
				// 调用发送请求方法,参数页码
				sendAJAX(1);
			}
		});

		// 上一页
		$(document).on("click", "#DataTables_Table_0_previous", function() {
			// 获取当前页码
			var pageNum = $("#pageInfo").data("pagenum") - 1;

			if (pageNum < 1) {
				// 拦截请求
				alert("已经是第一页");
			} else {
				// 调用发送请求方法,参数页码
				sendAJAX(pageNum);
			}
		})

		// 下一页
		$(document).on("click", "#DataTables_Table_0_next", function() {
			// 获取当前页码
			var pageNum = eval($("#pageInfo").data("pagenum") + 1);
			// 获取最大页码
			var pages = $("#pageInfo").data("pages");

			if (pageNum > pages) {
				// 拦截请求
				alert("已经是最后一页");
			} else {
				// 调用发送请求方法,参数页码
				sendAJAX(pageNum);
			}
		})

		// 尾页
		$(document).on("click", "#DataTables_Table_0_last", function() {
			// 获取当前页码
			var pageNum = $("#pageInfo").data("pagenum");
			// 获取最大页码
			var pages = $("#pageInfo").data("pages");

			if (pageNum == pages) {
				// 拦截请求
				alert("已经是尾页");
			}
			// 调用发送请求方法,参数页码
			sendAJAX(pages);

		})

		// 页码
		$(document).on("click", ".currents", function() {
			// 获取当前显示的页码
			var currentPageNum = $("#pageInfo").data("pagenum");
			// 获取当前超链接上表示的页码
			var pageNum = $(this).text();
			if (currentPageNum == pageNum) {
				return;
			}
			// 调用发送请求方法,参数页码
			sendAJAX(pageNum);
		});

	});
	// 发送AJAX请求 
	function sendAJAX(pageNum) {
		// 获取显示记录数
		var pageSize = $("#select-pageSize").val();
		// 获取输入关键字
		var keyword = $("#keyword").val();
		$.ajax({
			async : true,
			type : "get",
			url : "${pageContext.request.contextPath}/index",
			data : {
				op : "searchByPage",
				pageNum : pageNum,
				pageSize : pageSize,
				keyword : keyword
			},
			dataType : "json",
			success : function(result) {
				// 调用渲染函数
				showData(result);
			},
			error : function() {
				alert("异步请求失败!");
			}
		});
	}
	//渲染数据到指定的Dom元素
	function showData(result) {
		var content = "";
		if (result.data.length == 0) {
			$(".index").html("无相关数据");
			$("#DataTables_Table_0_paginate").html("");
		} else {
			for (var i = 0; i < result.data.length; i++) {
				var user=result.data[i];
				content += "<tr>" + "<td>"
						+ user.userId
						+ "</td>"
						+ "<td>"
						+ user.userName
						+ "</td>"
						+ "<td>"
						+ user.userPassword
						+ "</td>"
						+ "<td>"
						+ (user.userSex==1?"男":"女")
						+ "</td>"
						+ "<td>"
						+ user.userBirth
						+ "</td>"
						+ "<td>"
						+ user.userAddress
						+ "</td>"
						+ "<td>"
						+ user.userPhone
						+ "</td>"
						+ "<td><img src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+user.userPicture+"\" width=\"90\" height=\"90\"/></td>"
						+ "<td><a href=\"#\" id=\"delete\" data-userid=\""+user.userId+"\">删除</a></td>"
						+ "</tr>";
			}
			$("#tbody-user").html(content);
			//渲染分页信息
			var pageInfo = "";
			pageInfo = "<span id=\"pageInfo\" data-pagenum=\""+result.pageNum+"\"  data-pages=\""+result.pages+"\">每页"
					+ result.pageSize
					+ "条 共"
					+ result.total
					+ "条  第"
					+ result.pageNum + "/" + result.pages + "页</span>";
			if (result.pageNum == 1) {
				pageInfo += "<a tabindex=\"0\" class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_first\" disabled=\"disabled\">首页</a>";
				pageInfo += "<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_previous\" disabled=\"disabled\" >上一页</a>";

			} else {
				pageInfo += "<a tabindex=\"0\" class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default \" id=\"DataTables_Table_0_first\" >首页</a>";
				pageInfo += "<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default \" id=\"DataTables_Table_0_previous\"  >上一页</a>";
			}

			pageInfo += "<span>";

			for (var i = 1; i <= result.pages; i++) {
				// 设置当前的页面激活样式
				if (result.pageNum == i) {
					pageInfo += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default ui-state-disabled currents\"  >"
							+ i + "</a>";
				} else {
					pageInfo += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default currents\" >"
							+ i + "</a>";
				}
			}

			pageInfo += "</span>";

			if (result.pageNum == result.pages) {
				pageInfo += "<a tabindex=\"0\" class=\"next fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_next\" disabled=\"disabled\">下一页</a>";
				pageInfo += "<a tabindex=\"0\" class=\"last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_last\" disabled=\"disabled\">尾页</a>";
			} else {
				pageInfo += "<a tabindex=\"0\" class=\"next fg-button ui-button ui-state-default\" id=\"DataTables_Table_0_next\">下一页</a>";
				pageInfo += "<a tabindex=\"0\" class=\"last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default\" id=\"DataTables_Table_0_last\">尾页</a>";
			}

			$("#DataTables_Table_0_paginate").html(pageInfo);
		}
	}
</script>

</html>